<template>
  <div ref="tGoods">
    <div class="goods-list">
      <div v-for="goods in goodsList" :key="goods.id" class="goods">
        <el-card class="p15">
          <el-carousel v-if="showGoodsPhoto" height="150px" direction="vertical">
            <el-carousel-item v-for="goodsImg in goods.imgList" :key="goodsImg.url">
              <el-image class="goods-img" :src="goodsImg.url">
                <div slot="error" class="goods-image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </el-carousel-item>
          </el-carousel>
          <div class="pl5">
            {{ goods.goodsName }}
          </div>
          <div class="goods-desc">
            {{ goods.description }}
          </div>
          <div :style="{ visibility: showInventory ? 'hidden' : '' }" class="goods-desc mt100">
            库存:
            <span class="inventory">{{
              goods.remainInventory !== undefined ? goods.remainInventory : goods.inventory
            }}</span>
          </div>
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="9">
              <div class="price">
                <span class="currency">￥</span
                ><span class="value">
                  {{ getPrice(goods) }}
                </span>
              </div>
            </el-col>
            <el-col :span="15">
              <el-input-number
                v-model="goods.count"
                :max="goods.remainInventory ? goods.remainInventory : 100"
                :min="0"
                class="goods-count"
                size="mini"
                @input="handleChangeGoodsNum(goods)"
              />
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'
import { getRequest } from '../../../api/baseRequest'

export default {
  name: 'TGoods',
  mixins: [mixin],
  props: {
    goodsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    showInventory: {
      type: Boolean,
      default: true
    },
    showGoodsPhoto: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      goodsValue: {}
    }
  },
  computed: {},
  watch: {
    goodsValue(val) {
      this.$emit('input', val)
    },
    goodsList(val) {}
  },
  created() {
    // 非表达设计情况下
    if ('design' !== this.$attrs.mode) {
      this.queryGoodsSellQuantity()
    }
  },
  methods: {
    queryGoodsSellQuantity() {
      getRequest('/form/ext/queryGoodsSellQuantity', {
        formKey: this.$route.params.key,
        formItemId: this.$attrs.formItemId
      }).then((res) => {
        let data = res.data
        this.goodsList.forEach((goods, index) => {
          let remainInventory = goods.inventory
          if (data[goods.id]) {
            remainInventory = goods.inventory - data[goods.id]
          }
          goods.remainInventory = remainInventory
          this.$set(this.goodsList, index, goods)
        })
      })
    },
    getPrice(goods) {
      return (goods.count * goods.price).toFixed(2)
    },
    handleChangeGoodsNum(goods) {
      this.$set(goods, 'finalPrice', goods.count * goods.price)
      this.$set(this.goodsValue, goods.id, goods.count)
    }
  }
}
</script>

<style>
.goods-list {
  display: flex;
  flex-wrap: wrap;
}

.edit-form-item .goods {
  width: 40%;
}

.goods {
  width: 30%;
  margin: 5px;
}

.goods-img {
  width: 100%;
  height: 100%;
}

.goods .el-card__body {
  padding: 0;
}

.goods-image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.goods-desc {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #999;
  display: -webkit-box;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  margin: 0;
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
}

.inventory {
  color: #000000;
}

.price {
  color: #e34152;
  /*font-size: 15px;*/
  /*font-weight: 500;*/
  /*line-height: 22px;*/
}

@media screen and (max-width: 500px) {
  .goods {
    width: 100% !important;
  }

  .goods-count {
    margin-right: 20px !important;
  }
}
</style>
